import Vue from "vue";
import App from "./App.vue";
import "./registerServiceWorker";
import router from "./router";
import store from "./store";
import dayjs from 'dayjs';
import relativeTime from 'dayjs/plugin/relativeTime';
import 'dayjs/locale/zh-cn'
dayjs.locale('zh-cn')
dayjs.extend(relativeTime)

// ------------ ViewUI -----------
import IViewUI from 'view-design';
import 'view-design/dist/styles/iview.css';
Vue.use(IViewUI);
// ------------ ViewUI -----------

// ------------ 自定义组件 --------
import mxNav from '_c/mx-nav/mx-nav';
import mxPane from '_c/mx-pane/mx-pane';
import mxList from '_c/mx-list/mx-list';
Vue.component('mx-nav', mxNav)
Vue.component('mx-pane', mxPane)
Vue.component('mx-list', mxList)
// ------------ 自定义组件 --------

/**
 * @param {Number} num 数值
 * @returns {String} 处理后的字符串
 * @description 如果传入的数值小于10，即位数只有1位，则在前面补充0
 */
const getHandledValue = num => {
  return num < 10 ? '0' + num : num
}
/**
 * @description 时间处理过滤器
 */
Vue.filter('formatDate', date => {
  const d = new Date(date)
  if(d.toString() === 'Invalid Date') {
    return '-'
  }
  const year = d.getFullYear()
  const month = getHandledValue(d.getMonth() + 1)
  const dd = getHandledValue(d.getDate())
  const hours = getHandledValue(d.getHours())
  const minutes = getHandledValue(d.getMinutes())
  const second = getHandledValue(d.getSeconds())
  let resStr = ''
  resStr = year + '-' + month + '-' + dd + ' ' + hours + ':' + minutes + ':' + second
  return resStr
})

/**
 * @description 时间逻辑处理 返回相对时间
 */
Vue.filter('fromDate', (date) => {
  // return dayjs().from(dayjs(date))
  return dayjs().to(dayjs(date))
})

/**
 * @description 文本截断
 */
Vue.filter('textSlice', text => {
  text = text.toString()
  const len = text.length
  if(len > 80) {
    return text.slice(0, 80) + '...'
  } else {
    return text.slice(0, len - 1) + '...'
  }
})

function hightLight(el, binding) {
  const match = binding.value;
  const reg = new RegExp(match, 'g')
  const txt = binding.arg
  let str = '';
  if (txt) {
    str = txt.replace(reg, `<span style="color:#F96600">${match}</span>`)
  } else {
    str = ''
  }
  el.innerHTML = str;
}
 
Vue.directive('hightlight', {
  bind(el, binding) {
    hightLight(el, binding)
  },
  componentUpdated(el, binding) {
    hightLight(el, binding)
  }
})

Vue.config.productionTip = false;

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount("#app");
